<template>
    <div>
        <admin-container>
            <template v-slot:content>

                <table-plugin 
                :config="tableConfig" 
                :page="page"
                :part-operate="partOperate"
                :global-operate="globalOperate"
                :search-operate="searchOperate"
                @part="partOperateActuator"
                @search="searchOperateActuator"
                @global="globalOperateActuator"
                />

            </template>

        </admin-container>

        <el-drawer
        :title="drawer.title"
        :visible.sync="drawer.flag"
        size="35%"
        @close="$refs['dictRef'].clearValidate();dict={};"
        >

        <div class="drawer-main">

            <el-form label-width="100px" :model="dict" ref="dictRef" :rules="rules">
            
                <el-form-item label="字典编码" prop="code">
                    <el-input v-model="dict.code" />
                </el-form-item>
                <el-form-item label="字典父节点" >
                    <el-select v-model="dict.parent" filterable clearable placeholder="选择父节点" :disabled="dict.id!=null">
                        <el-option :label="option.name" :value="option.id" v-for="(option,index) in dictList" :key="index" :disabled="option.id === dict.id" /> 
                    </el-select>
                </el-form-item>
                <el-form-item label="字典名" prop="name">
                    <el-input v-model="dict.name" />
                </el-form-item>
                <el-form-item label="字典值" >
                    <el-input v-model="dict.value" />
                </el-form-item>
                <el-form-item label="字典排序" prop="sort">
                    <el-input v-model="dict.sort" />
                </el-form-item>
                <el-form-item label="字典状态" prop="status">
                    <el-select v-model="dict.status" clearable>
                        <el-option label="启用" :value="1"/>
                        <el-option label="封存" :value="0"/>
                        
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" class="deep-textarea">
                    <el-input type="textarea" v-model="dict.remark" />
                </el-form-item>
            </el-form>


            <div class="drawer-btn">
                <el-button type="primary" size="medium" @click="saveOrUpdate">提交表单</el-button>
                <el-button  size="medium" @click="drawer.flag = false">取消</el-button>
            </div>
        </div>

        </el-drawer>

        

    </div>
</template>
<script>
import AdminContainer from '@/components/plugs/admin-container/AdminContainer.vue'
import TablePlugin from '@/components/plugs/table-plugin/TablePlugin.vue'
import { get,post } from '@/utils/api'
export default{
    data(){

        let loadTree = function(row, treeNode, resolve){
            console.log('我被触发了...')
            setTimeout(()=>{
                console.log('row',row);
                resolve(row[this.config.treeProps.children])
            },1000)
        }
        return{
            drawer:{
                flag:false,
                title:''
            },
            dict:{},
            rules:{
                code:[{ required: true, message: '字典编码不能为空', trigger: 'blur' }],
                name:[{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
                sort:[{ required: true, message: '排序不能为空', trigger: 'blur' }],
                status:[{ required: true, message: '字典状态不能为空', trigger: 'blur' }]
            },
            dictList:[],
            page:{
                current:1,
                size:10,
                total:0,
                records:[]
            },
            tableConfig:{
                rowKey:'id',
                // treeProps:{},
                treeProps:{children: 'childNode',haseChild:'haseChild'},
                load:loadTree,
                columns:[
                    {
                        fixed:false,
                        prop:'id',
                        label:'主键',
                        width:'150',
                    },
                    {
                        fixed:false,
                        prop:'code',
                        label:'字典编号',
                        width:'150',
                    },
                    {
                        fixed:false,
                        prop:'name',
                        label:'字典名称',
                        width:'150',
                    },
                    {
                        fixed:false,
                        prop:'value',
                        label:'字典值',
                        width:'150',
                    },
                    {
                        fixed:false,
                        prop:'sort',
                        label:'排序',
                        width:'150',
                    },
                    {
                        fixed:false,
                        prop:'remark',
                        label:'备注',
                        width:'150',
                    },
                    {
                        fixed:false,
                        prop:'statusName',
                        label:'状态',
                        width:'150',
                    }

                ]

            },
            partOperate:[
                
                {type:'update',text:'修改',level:'text',color:''},
                {type:'delete',text:'删除',level:'text',color:'red'}
            ],
            searchOperate:{
                entity:{},
                condition:[
                    {label:'字典名称',prompt:'查询顶级字典项名称',type:'input',width:'300px',name:'name'}
                
                ]
            },
            globalOperate:{
                left:[
                    {type:'add',text:'新增字典项',level:'primary',icon:''},
                    
                ],
                right:[
                ]
            }

        }
    },
    methods:{
        partOperateActuator(index,row,operate){
            console.log('op',operate)
      
            switch(operate.type){
                case 'update':
                    this.getDictList();
                    this.drawer.flag = true;
                    this.drawer.title = '修改字段项'
                    this.dict = JSON.parse(JSON.stringify(row));
                    // console.log('update',this.drawer);
                    break;
                case 'delete':
                    this.deleteDict(row);
                    break;  
            }
            

        },
        globalOperateActuator(entity){
            switch(entity.operate.type){
                case 'add':
                    this.getDictList();
                    this.drawer.flag = true;
                    this.drawer.title = '新增字段项'
                    break;
            }
            

        },
        searchOperateActuator(){
            this.getPage();

        },
        deleteDict(row){
            const promise = post({
                url:'/base-system/dict/delete',
                data:{id:row.id}
            });

            promise.then(res=>{
                if(res&&res.code === 200){
                    this.$message.success(res.message);
                    this.getPage();
                    return;
                }
                this.$message.error(res.message);
            });




        },
        saveOrUpdate(){

            this.$refs['dictRef'].validate((valid)=>{

                if(valid){
                    const promise = post({
                        url:'/base-system/dict/save-or-update',
                        data:{...this.dict}
                    });

                    promise.then(res=>{
                        if(res&&res.code === 200){
                            this.$message.success(res.message);
                            this.getPage();
                            this.drawer.flag = false;
                            return;
                        }

                        this.$message.error(res.message);
                    })

                }else{
                    this.$message.error('表单数据校验失败，请检查后重试~')
                }

            })

           
            

        },
        getPage(){

            const promise =  get({
                url:'/base-system/dict/page',
                params:{current:this.page.current,size:this.page.size,name:this.searchOperate.entity.name}
            });

            promise.then(res=>{
                if(res&&res.code === 200){

                    this.$nextTick(()=>{
                        this.page = res.data;
                    })
                    
                }
            })

        },
        getDictList(){

            const promise = get({
                url:'/base-system/dict/load-all'
            });

            promise.then(res=>{
                if(res&&res.code === 200){
                    this.dictList = res.data;
                }
            })

        }

    },
    components:{
        AdminContainer,
        TablePlugin

    },
    created(){
        this.getPage();
    }
}
</script>

<style scoped>
    .drawer-main{
        padding-left: 20px;
        padding-right: 20px;
        position: relative;
        padding-bottom: 50px;
    }

    .drawer-btn{
        position: fixed;
        bottom: 0;
        padding-bottom: 20px;
    }
    .deep-textarea>>>textarea{
    height: 100PX;
    resize: none;
    }
</style>